@use "design-system";

.qr-code {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  &__message-container > div:first-child {
    @include design-system.Paragraph;

    margin-top: 18px;
    color: var(--color-text-muted);
  }

  &__message {
    @include design-system.H7;

    color: var(--color-warning-default);
  }

  &__error {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-error-default);
    margin-bottom: 9px;
  }

  &__address-container {
    display: flex;
    justify-content: center;
    cursor: pointer;
    align-items: center;

    &__tooltip-wrapper {
      width: 100%;
    }
  }

  &__address {
    @include design-system.H7;

    background-color: var(--color-background-alternative);
    width: 76%;
    padding: 8px 12px;
    word-break: break-all;
    text-align: center;
  }
}
